import { mapGetters, mapActions} from 'vuex';


export const musicMixin = {
    computed: {
        ...mapGetters('music', [
            'playUrl',
            'playId',
            'playInfo',
            'playState',
            'cacheList',
            'playList',
            'playIndex',
            'playMode'
        ]),
        ...mapGetters('audio', ['audio']),
        imgCover(){
            return this.playInfo ? this.playInfo.al.picUrl : '';
        },
        songName(){
            return this.playInfo ? this.playInfo.name : '暂无歌曲';
        },
        singer(){
            return this.playInfo ? this.playInfo.ar.map(item => item.name).join() : '';
        },
        volume: {
            get(){
                return this.audio.volume * 100;
            },

            set(n){

                this.audio.volume = n/100;
            }
        },
        currentTime: {
            get(){
                let time = this.audio.currentTime;
                console.log(time);
                return time;
            },


            // set(n){
            //     this.audio.currentTime = n;
            // }
        }
    },
    watch: {
        playUrl(n){
            this.audio.src = n;
        }
    },
    methods: {
        ...mapActions('music', [
            'setPlayUrl',
            'setPlayId',
            'setPlayInfo',
            'setPlayState',
            'setCacheList',
            'setPlayList',
            'setPlayIndex',
            'setPlayMode'
        ]),
        
        gotoControl(){
            this.$router.push('/control')
        },

        playMusic(){
            if(this.audio.src){
                console.log('play Music');
                
                try {
                    this.audio.play();;
                    this.setPlayState(true);
                }catch(err){
                    console.error(err)
                    this.playMusic();
                }                
                
            }
            
        },
        pauseMusic(){
            if(this.audio.src){
                try {
                    this.audio.pause();
                    this.setPlayState(false);
                }catch(err) {
                    console.error(err)
                    this.pauseMusic();
                }   
            }
        },

        togglePlayState(){

            if(!this.playState){

                this.playMusic();
                console.log('play')
            }else{
                
                this.pauseMusic()
                console.log('pause')
            }
        },

        nextMusic() {
            let index = this.playIndex;
            let list = this.playList;

            if(list.length > 0 && index < list.length - 1){
                this.setPlayIndex( ++index );
            }else{
                this.setPlayIndex(0);
            }

            let id = list[this.playIndex].id;
            this.setPlayInfo(id).then(res => {
                this.playMusic();
            });
        },

        prevMusic() {
            let index = this.playIndex;
            let list = this.playList;
            if(list.length > 0 && index > 0 ){
                this.setPlayIndex( --index );
            }else{
                this.setPlayIndex(0);
            }

            let id = list[this.playIndex].id;
            this.setPlayInfo(id).then(res => {
                this.playMusic();
            });
        },

        watchMusicProgress(){
            // this.audio.onratechange = function(res){
            //     console.log(res)
            // }
            let _this = this;
            this.audio.ontimeupdate = function(evt){
                let time = this.currentTime;
                // _this.currentTime = time;

            }
        }
    },
    mounted(){

        // this.watchMusicProgress()
    }
}
